<template>
  <div>
    <navbar/>
    <div class="container main" v-loading="loading">
    <div class="grid1">
      <div class="grid11">
        <div class="grid112" style="margin:13px 20px 0 0;">
          <div style="margin-top: 25px;">
            <el-icon style="color: #A9ABB1;"><Histogram /></el-icon>
            <span>标签</span>
          </div>
          <div style="margin-top: 18px;margin-left: -10px;">
            <el-tag style="padding: 20px;border-radius: 7px;" v-for="(item,index) in reportData.tag">{{item}}</el-tag>
          </div>
        </div>
        <div class="grid111" style="margin: 10px 0 10px 0;">
          <div style="margin-top: 25px;">
            <el-icon style="color: #A9ABB1;"><Comment /></el-icon>
            <span>标题</span>
          </div>
          <el-input
            v-model="title"
            size="large"
            placeholder="Title - 必填"
            :disabled="true"
          />
        </div>
      </div>
      <div class="grid12" style="margin: 10px 0 10px 0;">
        <el-upload
          v-if="imageUrl"
          class="upload-demo"
          drag
          action="#"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :http-request="upload"
        >
          <img style="max-width:304px;max-height:171px" :src="imageUrl" alt="">
        </el-upload>
      </div>
    </div>
    <div class="grid21">
      <div style="margin-top: 10px;">
        <el-icon style="color: #A9ABB1;"><Promotion /></el-icon>
        <span>内容</span>
      </div>
      <!-- 富文本编辑器 -->
      <div class="grid2" style="height: auto;min-height: 200px;border: 1px solid #ccc;border-radius: 10px;">
        <div>
          <Editor
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated"
          />
        </div>
      </div>
    </div>
    <div class="grid3">
      <div style="margin-top: 10px;">
        <el-icon style="color: #A9ABB1;"><Comment/></el-icon>
        <span>评论</span>
      </div>
      <el-input
        v-model="commentInput"
        :autosize="{ minRows: 3, maxRows: 3 }"
        type="textarea"
        placeholder="评论内容："
      />
    </div>
    <div class="grid5">
      <div>
      </div>
      <div>
      <el-button style="border-radius:6px;margin-top:-2px" size="large" type="primary" @click="clickPush">发表评论</el-button>
    </div>
    </div>

    <div class="grid4">
      <div style="margin-top: 10px;">
      </div>
        <ul>
          <li style="height: 50px;border:1px solid #E5E7EB;border-top-left-radius: 10px;border-top-right-radius: 10px;">
            <h5 style="padding: 15px;font-size: 1.125rem;font-weight: 400;color: #777777;">最新评论</h5>
          </li>
          <!-- 使用v-for循环将文章数据展示在前台 -->
         <li class="forLi" v-for="i in paginationResults" style="height: 100px;border:1px solid #E5E7EB;border-top: none;">
            <div style="display: grid;grid-template-columns: 1fr 9fr;padding-right: 30px;">
              <el-avatar :size="60" :src="i.img" style="margin:20px"/>
              <div class="top-text" style="display: grid;grid-template-rows:1fr 1fr;padding-top: 25px;padding-bottom: 20px;">
                <div style="display: grid;grid-template-columns:1fr;padding-bottom: 2px;">
                  <span style="font-size: 18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{i.comment}}</span>
                </div>
                <div class="bottom-text" style="width:800px;padding-top: 2px;">
                  <span style="font-size: 14px;">
                    <el-icon style="margin-top: 7px;"><User /></el-icon>
                    {{i.username}}
                  </span>
                  <span style="font-size: 14px;">
                    <el-icon style="margin-top: 7px;"><Star /></el-icon>
                    {{i.like}}
                  </span>
                  <span style="font-size: 14px;">
                    <el-icon><Clock /></el-icon>
                    {{i.comment_date}}
                  </span>
                </div>
              </div>
            </div>
          </li>
          <!-- 分页 -->
          <li style="height: 60px;border:1px solid #E5E7EB;border-top: none;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;">
            <div style="padding: 10px;">
              <el-config-provider :locale="locale">
                <el-pagination
                  v-model:currentPage="currentPage"
                  :background="true"
                  layout="total,prev, pager, next"
                  :total="restotal"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </el-config-provider>
            </div>
          </li>
        </ul>
    </div>
  </div>
  <!-- 返回顶部组件 -->
  <el-backtop :right="50" :bottom="50" />
  </div>
</template>
<script setup>
import { useRoute } from 'vue-router'
import { ref, shallowRef , onMounted } from 'vue'
import navbar from '@/components/navbar.vue'
import { Editor } from '@wangeditor/editor-for-vue'
import '/node_modules/element-plus/theme-chalk/el-pagination.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
// 引入wangeditor样式
import '@wangeditor/editor/dist/css/style.css'
import { putreport,updateReport,removeComment, removeReport,selectByTag,
  select,putReportByLike,pushComment,likeReport,putOneReport,addcomment,
  uploadPost,login
} from '@/api/system.js'
// 将element组件设置为中文
const locale = ref(zhCn)
const paginationResults=ref()
const commentInput = ref()
const reportId = ref('')
const reportData = ref('')
const route = useRoute()
const mode = 'simple'
const restotal = ref()
const imageUrl = ref()
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 内容 HTML
const valueHtml = ref('')
const editorConfig = {
  MENU_CONF: {},
  placeholder: '请输入文章内容...',
  readOnly : true
}

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}
const mainValue = ref()
const getTag = (value) => {
  mainValue.value = value
  console.log(value);
}
const title = ref('')
// 加载组件
const loading = ref(false)
onMounted(()=>{
  getReportId()
  getReportDate()
  getComment()
})
const clickPush = () => {

if(localStorage.getItem("userId")){
  var id =localStorage.getItem("userId")
  // console.log(id);
  // console.log(reportId.value);
  // console.log(commentInput.value);
  const data = {
      user_id:id,
      report_id:reportId.value,
      comment:commentInput.value
    }
  addcomment(data).then((res) => {
    console.log(res.data)
    ElMessage({
      message: "发表评论成功",
      type: 'success',
      //跳转到登录页面
    })
    commentInput.value = ''
  })
}else{
  ElMessage({
    message: "请前往登录",
    type: 'error',
    //跳转到登录页面
  })
}
}
const getReportDate = () => {
  const data = {
    report_id:reportId.value
  }
  console.log(reportId);
  putOneReport(data).then((res) => {
    console.log(res)
    valueHtml.value=res.text
    reportData.value=res
    title.value=res.title
    if(res.img){
      imageUrl.value=res.img
    }
  })

}
const getReportId = () => {
  reportId.value = route.query.reportId;
  console.log(reportId.value);
}
// 获取评论
const getComment = () => {
  const data = {
    report_id: reportId.value,
    page: 1
  }
  pushComment(data).then((res) => {
    console.log(res);
    paginationResults.value=res
    console.log(res.length)
    restotal.value = res.length
    console.log(restotal)
    // console.log(paginationResults.value);
  })
}
</script>
<style scoped lang="scss">
.grid1{
  height: 197px;
  display: grid;
  grid-template-columns: 3fr 1fr;
}
.grid11{
  display: grid;
  grid-template-rows: 1fr 1fr;
}
#editor—wrapper {
  border: 1px solid #ccc;
  z-index: 100; /* 按需定义 */
}
#toolbar-container { border-bottom: 1px solid #ccc; }
#editor-container { height: 500px;}
:deep(.w-e-text-container){
  border-radius: 20px;
}
p {
  margin-top: .4em;
  margin-bottom: .4rem;
}
:deep(.grid111 .el-input__inner){
  height: 75px;
}
:deep(.grid111 .el-input--large .el-input__wrapper){
  border-radius: 10px !important;
  font-size: 19px;
  margin-right: 20px;
}
:deep(.el-input--large .el-input__wrapper){
  ::-webkit-input-placeholder{/*Webkit browsers*/
    font-size:17px;
  }
  :-moz-placeholder{/*Mozilla Firefox 4 to 8*/
    font-size:17px;
  }
  ::moz-placeholder{/*Mozilla Firefox 19+*/
    font-size:17px;
  }
}
.main{
  margin-top: 63px;
  margin-bottom: 0px;
  width: 100%;
  display: grid;
  grid-template-rows: 2fr auto 1fr auto;
}
:deep(.w-e-toolbar){
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
:deep(.w-e-text-container){
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.grid112,.grid111{
  display: grid;
  grid-template-columns: 1fr 10fr;
  span{
    margin-left: 10px;
    font-size: 18px;
    color: #A9ABB1;
  }
}
.grid21{
  display: grid;
  grid-template-columns: 1fr 13fr;
  margin-top: 5px;
  span{
    margin-left: 10px;
    font-size: 18px;
    color: #A9ABB1;
  }
}
.grid3{
  display: grid;
  grid-template-columns: 1fr 13fr;
  margin-top: 10px;
  span{
    margin-left: 10px;
    font-size: 18px;
    color: #A9ABB1;
  }
}
.grid4{
  display: grid;
  grid-template-columns: 1fr 13fr;
  margin-top: 10px;
  span{
    margin-left: 10px;
    font-size: 18px;
    color: #A9ABB1;
  }
}
.grid5{
  display: grid;
  grid-template-columns: 1fr 13fr;
  span{
    margin-left: 10px;
    font-size: 18px;
    color: #A9ABB1;
  }
}
:deep(.el-select .el-input__inner){
  height: 75px !important;
}
:deep(.el-select .el-input__wrapper){
  border-radius: 10px;
}
:deep(.el-select .el-select__tags .el-tag--info){
  padding: 28px 15px 28px 15px;
  font-size: 16px;
  border-radius: 8px;
}
:deep(.el-tag__close){
  height: 30px;
  width: 30px;
  font-size: 20px;
}
:deep(.el-input.is-disabled .el-input__wrapper){
background-color: #fff !important;
}
.bottom-text span{
  padding-right: 10px;
  color:#999999
}
li{
  list-style: none;
}
ul{
  padding: 0;
}
:deep(.el-upload-dragger){
  border-width: 3px;
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
}
.grid2{
  border: none !important;
}
</style>